<template>
	<view>
		<view class="shop" v-for="(item,index) in shoplist">
			<view class="shop_radio">
				<uni-data-checkbox multiple v-model="value" :localdata="range" @change="change"></uni-data-checkbox>
			</view>
			<view class="shop_img">
				<image :src="item.img" style="width: 80%;height: 70px;margin-top: 15px;"></image>
			</view>
			<view class="shop_title">
				<view class="shop_news">
					{{item.news}}
				</view>
				<view class="shop_name">
					{{item.name}}
				</view>
				<view class="shop_tiao">
					七天无理由退款
				</view>
			</view>
			<view class="shop_price">
				<view class="shop_prices">
					￥{{item.price}}
				</view>
				<view class="shop_num">
					×{{item.num}}
				</view>
			</view>
		</view>
		
		<view class="sum">
			<view class="shop_radios">
				<uni-data-checkbox multiple v-model="value" :localdata="range" @change="change"></uni-data-checkbox>
			</view>
			<view class="shop_names">
				全选
			</view>
			<view class="shop_computed">
				合计：￥0
			</view>
			<view class="shop_jie">
				<button>结算</button>
			</view>
		</view>
		
		<view class="tuijian">
			<view class="left">
				——————·
			</view>
			<view class="center">
				热门推荐
			</view>
			<view class="right">
				·——————
			</view>
		</view>
		
		<view class="shopmenu">
			<view class="shopmenus" v-for="(item,index) in shopmenu">
				<view class="shopmenus_img">
					<image :src="item.img" style="width: 100%;height: 100%;"></image>
				</view>
				<view class="shopmenus_name">
					{{item.name}}
				</view>
				<view class="shopmenus_price">
					<text style="font-size: 10px;">￥</text>{{item.price}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: [0],
				range:[{"value":0}],
				shoplist:[
					{value:0,img:'../../static/images/shop1.png',news:'【现货发顺丰 6期免息】',name:'vivo X60 5G新品拍照',price:'158.00',num:1},
					{value:1,img:'../../static/images/shop2.png',news:'【现货发顺丰 6期免息】',name:'vivo X60 5G新品拍照',price:'158.00',num:1},
					{value:2,img:'../../static/images/shop3.png',news:'【现货发顺丰 6期免息】',name:'vivo X60 5G新品拍照',price:'158.00',num:1},
					{value:3,img:'../../static/images/shop4.png',news:'【现货发顺丰 6期免息】',name:'vivo X60 5G新品拍照',price:'158.00',num:1},
				],
				shopmenu:[
					{img:'../../static/images/shop5.png',name:'Apple/苹果 iPone 12...',price:998.00},
					{img:'../../static/images/shop6.png',name:'Apple/苹果 iPone 12...',price:998.00},
					{img:'../../static/images/shop6.png',name:'Apple/苹果 iPone 12...',price:998.00},
					{img:'../../static/images/shop5.png',name:'Apple/苹果 iPone 12...',price:998.00},
				]
			}
		},
		methods: {
			// change(){
			// 	 console.log('e:',e);
			// }
		}
	}
</script>

<style scoped>
    .shop{
		width: 100%;
		height: 100px;
		display: flex;
		flex-wrap: nowrap;
		border-bottom: 1px solid #ccc;
		background-color: #fff;
		margin-top: 10px;
	}
	.shop_radio{
		width: 10%;
		height: 20px;
		margin-top: 9%;
		margin-left: 2%;
	}
	.shop_img{
		width: 20%;
		height: 100px;
	}
	.shop_title{
		width: 40%;
		height: 100px;
	}
	.shop_news{
		width: 100%;
		height: 30px;
		line-height: 55px;
		font-size: 14px;
	}
	.shop_name{
		width: 100%;
		height: 30px;
		line-height: 40px;
		font-size: 14px;
		overflow: hidden;
	}
	.shop_tiao{
		width: 50%;
		height: 20px;
		margin-top: 5px;
		background-color: #F0AD4E;
		line-height: 20px;
		text-align: center;
		color: #E43D33;
		font-size: 10px;
	}
	.shop_price{
		width: 20%;
		height: 100px;
		margin-left: 5%;
	}
	.shop_prices{
		width: 100%;
		height: 30px;
		line-height: 55px;
		font-size: 14px;
		text-align: right;
	}
	.shop_num{
		width: 100%;
		height: 30px;
		line-height: 55px;
		font-size: 14px;
		text-align: right;
	}
	.sum{
		width: 100%;
		height: 50px;
		border-bottom: 1px solid #ccc;
		display: flex;
		flex-wrap: nowrap;
	}
	.shop_radios{
		width: 10%;
		height: 20px;
		margin-top: 3%;
		margin-left: 2%;
	}
	.shop_names{
		width: 20%;
		height: 50px;
		line-height: 50px;
	}
	.shop_computed{
		width: 20%;
		margin-left: 10%;
		height: 50px;
		line-height: 50px;
	}
	.shop_jie{
		width: 30%;
		height: 50px;
		margin-left: 2%;
	}
	.shop_jie button{
		width: 100%;
		height: 30px;
		background-color: orange;
		color: #fff;
		text-align: center;
		line-height: 30px;
		border-radius: 30px;
		margin-top: 10px;
		margin-left: 10%;
	}
	.tuijian{
		width: 100%;
		height: 60px;
		line-height: 60px;
		display: flex;
		flex-wrap: nowrap;
		font-size: 14px;
	}
	.left{
		width: 25%;
		height: 60px;
		margin-left: 13%;
	}
	.center{
		width: 25%;
		height: 60px;
		text-align: center;
	}
	.right{
		width: 25%;
		height: 60px;
	}
	.shopmenu{
		width: 96%;
		height: 100%;
		margin-left: 2%;
		display: flex;
		flex-wrap: wrap;
	}
	.shopmenus{
		width: 49%;
		height: 250px;
		margin-left: 1%;
	}
	.shopmenus_img{
		width: 100%;
		height: 200px;
	}
	.shopmenus_name{
		width: 100%;
		height: 25px;
		line-height: 25px;
	}
	.shopmenus_price{
		width: 100%;
		height: 25px;
		line-height: 25px;
		font-size: 14px;
		color: red;
	}
</style>
